<template>
<!-- 分类页面 -->
  <div class="category">
    <!-- 分类头部组件 -->
    <CategoryHeader></CategoryHeader>
    <!-- 分类内容组件 -->
    <CategoryBottom :list="[listFF,listD,listF]" @switched="rightBtn"></CategoryBottom>
    <Tabbar :active="1"></Tabbar>
  </div>
</template>

<script>
// 父组件获取数据给到对于需要用到的子组件
import {data} from '../../api/index.js'
import Tabbar from '../../components/tabbar.vue'
import CategoryHeader from './components/categoryHeader.vue'
import CategoryBottom from './components/categoryBottom.vue'
export default {
  components:{
    Tabbar,
    CategoryHeader,
    CategoryBottom
  },
  data(){
    return {
      listF:[],
      listFF:[],
      listD:[],
      active:0
    }
  },
  mounted(){
    data(res=>{
      // 左侧name
      this.listF = res.data.data
      // 右侧头部大图片
      this.listFF = this.listF[0]
      // 右侧商品信息
      this.listD = this.listF[0].list
      // console.log(this.listD);
    })
  },
  methods:{
    rightBtn(index){
      this.active = index
      this.listFF = this.listF[this.active]
      this.listD = this.listF[this.active].list
    }
  }
}
</script>

<style lang="scss" scoped>
  .category{
    float: left;
    width: 100%;
  }
</style>